<template>
  <div>
    <van-nav-bar
        right-text="登录>>"
        @click-right="tzlogin()"
    />
    <div id="dvl1">
      <!--    1.图片-->
      <div>
        <van-image
            round
            width="6rem"
            height="6rem"
            src="https://img1.baidu.com/it/u=1345182766,2507479921&fm=253&fmt=auto&app=138&f=JPEG?w=250&h=300"
        />
      </div>
      <!--    2.注册表单-->
      <div>
        <van-field v-model="user.phone" label="账号" required
             :right-icon="phonemsg"  placeholder="请输入手机号" @change="checkPhone()" ><!--<van-icon name="success" />-->
        </van-field>
        <van-field
            v-model="code"
            center
            required
            clearable
            @change="checkCode()"
            label="验证码"
            placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button size="small" type="info" @click="sendCode()" :disabled="btnflag">{{btnmsg}}</van-button>
          </template>
        </van-field>
          <van-field v-model="user.password" type="password" required label="密码" placeholder="请输入密码" />
          <van-field v-model="password2" :disabled="vfflag" @change="checkPass()" type="password" required label="确认密码" placeholder="请输入密码" />

        <div style="margin: 16px;">
          <van-button round block type="info" @click="register()":disabled="btnflag2"><span style="font-size: 20px">注册新用户</span></van-button>
        </div>

        </div>

      </div>
      <!-- 3.登录形式切换-->
      <div  style="float: right;display: flex;">
        <van-row >
            <span style="font-size: 15px"><router-link to="/find">忘记密码?</router-link></span>
        </van-row>
      </div>
  </div>

</template>
<script>
export default {
  name:"Register",
  data(){
    return{
      logintype:true,
      user:{
        phone:"",
        password:""
      },
      code:"",
      phonemsg:"",
      btnmsg:"发送验证码",
      djs:60,
      btnflag:true,
      btnflag2:true,
      password2:"",
      vfflag:true
    }
  },methods:{
    tzlogin(){
      this.$router.push("/lin");
    },
    checkPhone(){
      //校验手机号是否可用
      this.axios.get("/api/user/checkphone.do?phone="+this.user.phone).then(res=>{
        if(res.data.code==200){
          //可用
          this.phonemsg="success";
          this.btnflag=false;
        }else {
          this.$toast("亲，手机号已被占用！");
          this.phonemsg="cross";
          this.btnflag=true;
        }
      })
    },
    sendCode() {
      //发送短信验证码
      if (this.phonemsg == "success") {
        //才能发送验证码
        this.axios.get("/api/sms/sendrcode.do?phone=" + this.user.phone).then(res => {
          if (res.data.code == 200) {
            this.$toast("验证码发送成功，请检查手机！");
            var r1 = setInterval(() => {
              if (this.djs > 1) {
                this.btnflag = true;
                this.djs--;
                this.btnmsg = this.djs + "秒";
              } else {
                clearInterval(r1);
                this.btnmsg = "再次发送验证码";
                this.btnflag = false;
                this.djs = 10;
              }
            }, 1000);
          }else {
            this.$toast(res.data.msg);
          }
        })
      }else {

      }
    },
    checkCode(){
      //校验短信验证码
      this.axios.post("/api/sms/checkrcode.do", {phone:this.user.phone,code:this.code}).then(res=>{
        if(res.data.code==200){
          this.vfflag=false;
        }else {
          this.vfflag=true;
        }
      })
    },
    checkPass(){
      //校验2次密码是否一致
      if(this.password2.length>0){
        if(this.password2==this.user.password){
          //
          this.btnflag2=false;
        }else {
          this.btnflag2=true;
        }
      }

    },
    register(){
      //实现新用户注册
      this.axios.post("/api/user/register.do",this.user).then(res=>{
        if(res.data.code==200){
          this.$toast("亲，注册成功！");
          this.$router.push("/login");
        }else {
          this.$toast("亲，很遗憾，注册失败！");
        }
      })
    }
  }
}
</script>
<style>
.dv3 span{
  color: gray;
  font-size: 10px;
  margin-top: 10px;
}
#dvl1{
  align-items: center;
  margin-top: 20%;
}
</style>